<template>
  <!-- <el-button @click="openFieldSelect">字段选择</el-button> -->

  <div class="aaa">
    <el-dropdown ref="dropdown" trigger="contextmenu" @command="handleFieldTemplate" placement="bottom">
      <el-button @click="queryFieldTemplate">
        字段模板
        <div class="dk-iconfont icon-ArrowDown"></div>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="i in FieldTemplateList" :key="i.label" :command="i.id">
            <div class="flex items-center w-[100%]">
              <span class="flex-1">{{ i.name }}</span>
              <span @click.stop="deleteItem(i)" class="h-[22px]"><svg-icon icon-class="delete" class="text-[red]" /></span>
            </div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-button @click="openFieldSelect" class="icon-btn">
      <span> <svg-icon icon-class="jichu_selected" class="text-[20px]" /> </span>
    </el-button>
  </div>
  <FieldSelect ref="FieldSelectRef" @submit="submitColumnsShow" @query="query" />
</template>

<script setup>
import api from "./api"
// Store Get Delete
const props = defineProps({
  fieldSelectConfig: {
    type: Object,
    default: () => ({}),
  },
})
const emit = defineEmits(["submit"])
// 字段选择
import FieldSelect from "@/views/salesInventory/components/FieldSelect.vue"
const FieldSelectRef = ref()
const columnsShow = ref([])
const submitColumnsShow = async ({ keys, name }) => {
  let params = {
    name,
    condition: keys,
    api_name: props.fieldSelectConfig.save,
  }
  await api.Store(params)
  query(keys)
}
// 字段选择 查询
const query = (keys) => {
  props.fieldSelectConfig.columnsShow = keys
  emit("submit")
}
// 字段选择 弹窗
const openFieldSelect = () => {
  FieldSelectRef?.value?.open(props.fieldSelectConfig)
}
// 选择字段模板
const handleFieldTemplate = (command) => {
  let item = FieldTemplateList.value.find((v) => v.id == command)
  props.fieldSelectConfig.columnsShow = item?.condition
  emit("submit")
}
const dropdown = ref()
// 获取字段模板
const FieldTemplateList = ref([])
const queryFieldTemplate = () => {
  api.Get({ api_name: props.fieldSelectConfig.save }).then((res) => {
    FieldTemplateList.value = res.data
    dropdown.value.handleOpen()
  })
}
const deleteItem = (item) => {
  api.Delete({ id: item.id }).then((res) => {
    queryFieldTemplate()
  })
}
</script>

<style lang="scss" scoped>
.aaa {
  .icon-btn {
    border-radius: 0 4px 4px 0;
    padding: 8px;
    border-left: none;
  }

  .el-dropdown {
    .el-button {
      border-radius: 4px 0 0 4px;
    }
  }
}
:deep(.el-dropdown-menu__item) {
  min-width: 120px;
}
</style>
